import React, { Component, PropTypes } from 'react';
import Module from '../../lib/module';
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

class findTime extends Module{
    constructor(props, context) {
        super(props, context);
        this.state = {
            startValue: null,
            endValue: null,
            endOpen: false,
        };
    };
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    disabledStartDate = (startValue) => {
        const endValue = this.state.endValue;
        if (!startValue || !endValue) {
            return false;
        }
        return startValue.valueOf() > endValue.valueOf();
    }

    disabledEndDate = (endValue) => {
        const startValue = this.state.startValue;
        if (!endValue || !startValue) {
            return false;
        }
        return endValue.valueOf() <= startValue.valueOf();
    }

    onChange = (field, value) => {
        this.setState({
            [field]: value,
        });
    }

    onStartChange = (value) => {
        this.onChange('startValue', value);
    }

    onEndChange = (value) => {
        this.onChange('endValue', value);
    }

    handleStartOpenChange = (open) => {
        if (!open) {
            this.setState({ endOpen: true });
        }
    }

    handleEndOpenChange = (open) => {
        this.setState({ endOpen: open });
    }



    render() {
        return <div className="find-time">
            时间查询：
            <div className="find-timer">
                <span>开始时间：</span>
                <DatePicker
                    disabledDate={this.disabledStartDate}
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    value={this.state.startValue}
                    placeholder="Start"
                    onChange={this.onStartChange}
                    onOpenChange={this.handleStartOpenChange}
                />
            </div>
            <div className="find-timer">
                <span>结束时间：</span>
                <DatePicker
                    disabledDate={this.disabledEndDate}
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    value={this.state.endValue}
                    placeholder="End"
                    onChange={this.onEndChange}
                    open={this.state.endOpen}
                    onOpenChange={this.handleEndOpenChange}
                />
            </div>
        </div>
    }
}
export default findTime;